<template>
  <div>
    <div class="flex flex-col h-full">
      <SearchContainer @search="queryList" @reset="() => formRef.resetFields()">
        <a-form ref="formRef" class="form-style-flex" :model="formState">
          <a-form-item name="pyjm" class="w-72 ml-2">
            <a-input v-model:value="formState.pyjm" placeholder="员工编号/员工姓名/助记码" />
          </a-form-item>
          <a-form-item name="wardId" label="病区" class="w-72 ml-2">
            <SelectArea v-model:value="formState.wardId" use-cache @change="queryList()" />
          </a-form-item>
        </a-form>
      </SearchContainer>
      <a-card class="mt-2 h-full">
        <div class="mb-3 flex justify-between mt-2 pr-40">
          <div class="w-40">
            <a-button type="primary" class="mr-2" ghost @click="onAdd">复制排班</a-button>
            <a-button type="primary" ghost @click="onPrint">打印</a-button>
            <div class="absolute top-[-9999px] hidden">
              <a-button ref="printMe" v-print="{ id: 'printMe' }">打印</a-button>
              <PrintView id="printMe" :print-data="printData" :week-time="weekTime" :week="week" />
            </div>
          </div>
          <div class="flex justify-center flex-1 items-center">
            <a-button type="primary" ghost @click="onClickUpper">上一周</a-button>
            <div class="mx-5 px-7 py-1 border rounded-md text-white" style="background-color: var(--primary-color)">{{ weekTime[0] }}~{{ weekTime[1] }}</div>
            <a-button type="primary" ghost @click="onClickBelow">下一周</a-button>
          </div>
        </div>
        <div class="overflow-hidden overflow-x-scroll w-full my-5">
          <div class="scheduling border-2">
            <div class="flex border-b-2 overflow-y-scroll">
              <div class="w-[180px] p-2 border-r-2 text-ellipsis">
                <div>护士</div>
              </div>
              <div v-for="(item, index) in week" :key="index" class="flex-1 p-2 border-r-2 text-center">
                {{ dayjs(weekTime[0]).add(index, 'day').format('MM-DD') }}{{ item }}
              </div>
            </div>
            <a-spin :spinning="loading">
              <div class="detail">
                <template v-if="empList.length > 0">
                  <div v-for="record in empList" :key="record.empId" class="flex border-b-2">
                    <div class="w-[180px] flex items-center p-2 border-r-2">
                      <div>{{ record.empName }}</div>
                      <div class="text-gray-400 ml-2 text-xs w-20 truncate">{{ record.ksmc }}</div>
                    </div>
                    <!-- 周一 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.mon"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="mon"
                        :date-index="0"
                        @success="queryList()"
                      />
                    </div>
                    <!-- 周二 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.tue"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="tue"
                        :date-index="1"
                        @success="queryList()"
                      />
                    </div>
                    <!-- 周三 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.wen"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="wen"
                        :date-index="2"
                        @success="queryList()"
                      />
                    </div>
                    <!-- 周四 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.thu"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="thu"
                        :date-index="3"
                        @success="queryList()"
                      />
                    </div>
                    <!-- 周五 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.fri"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="fri"
                        :date-index="4"
                        @success="queryList()"
                      />
                    </div>
                    <!-- 周六 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.sat"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="sat"
                        :date-index="5"
                        @success="queryList()"
                      />
                    </div>
                    <!-- 周日 -->
                    <div class="flex-1 p-2 border-r-2">
                      <SchedulingOptionsNew
                        :emp-data="record?.sun"
                        :emp-item="record"
                        :week-time="weekTime"
                        sun-object="sun"
                        :date-index="6"
                        @success="queryList()"
                      />
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="text-center mt-10">
                    <a-empty description="暂无数据" />
                  </div>
                </template>
              </div>
            </a-spin>
          </div>
        </div>
      </a-card>
    </div>
    <CopyAdd v-model:open="copyOpen" :department="formState.wardName" @success="queryList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { post } from '@/utils/request'
// import { getSystemConfig } from '@/utils/systemConfig'
import SchedulingOptionsNew from './components/SchedulingOptionsNew'
import CopyAdd from './components/CopyAdd'
import PrintView from './components/PrintView.vue'

const printData = ref({})
const printMe = ref()
const formRef = ref(null)
const loading = ref(false)
const copyOpen = ref(false)
const weekTime = ref([dayjs().startOf('week').format('YYYY-MM-DD'), dayjs().endOf('week').format('YYYY-MM-DD')]) //[2024-3-17, 2024-3-23]
const formState = ref({ wardId: '' })
const week = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
const empList = ref([])

const onClickUpper = () => {
  weekTime.value = [dayjs(weekTime.value[0]).subtract(7, 'day').format('YYYY-MM-DD'), dayjs(weekTime.value[1]).subtract(7, 'day').format('YYYY-MM-DD')]
  queryList()
}

const onPrint = async () => {
  const { code, msg, data } = await post('inp/InpNursingScheduling/printInpNursingSchedulingList', { ...formState.value, date: weekTime.value[0] })
  if (code !== 0) return message.error(msg)
  if (getSystemConfig('NAVYHIS_MODE') === '1') {
    printData.value = JSON.parse(data)
    setTimeout(() => {
      setPrintSize('A4', 'landscape')
      printMe.value.$el.click()
    }, 1000)
  } else {
    window.openExe?.rpt(data) //调用winform打印
  }
}

const onClickBelow = () => {
  weekTime.value = [dayjs(weekTime.value[0]).add(7, 'day').format('YYYY-MM-DD'), dayjs(weekTime.value[1]).add(7, 'day').format('YYYY-MM-DD')]
  queryList()
}

const onAdd = () => {
  copyOpen.value = true
}

const queryList = async () => {
  // if (!formState.value.mcbm && !formState.value.ksList.length) return message.error('请输入员工或选择科室')
  loading.value = true
  const { code, data, msg } = await post('/inp/InpNursingScheduling/getInpNursingSchedulingList', {
    date: weekTime.value[0],
    ...formState.value
  })
  loading.value = false
  if (code !== 0) return message.error(msg)
  empList.value = data
}

onMounted(() => {
  queryList()
})
</script>
<style lang="less" scoped>
.scheduling {
  .detail {
    width: 100%;
    height: calc(100vh - 282px);
    overflow: hidden;
    overflow-y: scroll;
  }
}
</style>
